<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 30px">
      <el-col :span="6"><el-card>1</el-card></el-col>
      <el-col :span="6"><el-card>1</el-card></el-col>
      <el-col :span="6"><el-card>1</el-card></el-col>
      <el-col :span="6"><el-card>1</el-card></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"> <div id="main" style="width: 1250px;height: 400px;margin-top: 20px"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="5"> <div id="pei" style="width: 700px;height: 400px;margin-left: 50px;margin-top: 20px"></div></el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';

    export default {
        name: "Home",
      data() {
          return {

          }
      },
      created() {
      },
     mounted() {
       var chartDom = document.getElementById('main');
       var myChart = echarts.init(chartDom);
       var option;
       option = {
         title: {
           text: '每类图书个月销售数量',
           subtext: 'Fake Data',
         },
         tooltip: {
           trigger: 'axis'
         },
         legend: {
           data: ['文艺', '生活', '科技', '教育', '童书','人文社科','青春文学','动漫','艺术','历史']
         },
         grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
         toolbox: {
           feature: {
             saveAsImage: {}
           }
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
           data: ['January', 'February', 'March','April','May', 'June','July', 'August','September','October', 'November', 'December']
         },
         yAxis: {
           type: 'value'
         },
         series: []
       };
       var peiChartDom = document.getElementById('pei');
       var myChartPei = echarts.init(peiChartDom);
       var peiOption;
       peiOption = {
         title: {
           text: '个季度注册人数',
           subtext: 'Fake Data',
           left: 'center'
         },
         tooltip: {
           trigger: 'item'
         },
         legend: {
           orient: 'vertical',
           left: 'left'
         },
         series: [
           {
             name: 'Access From',
             type: 'pie',
             radius: '50%',
             data: [
             ],
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             }
           }
         ]
       };
       this.request.get("/echarts/user").then(res => {
         //option.series[0].data = res.data
         //option && myChart.setOption(option);

          peiOption.series[0].data = [
           {name: "第一季度",value: res.data[0]},
           {name: "第二季度",value: res.data[1]},
           {name: "第三季度",value: res.data[2]},
           {name: "第四季度",value: res.data[3]},
         ]
         option && myChartPei.setOption(peiOption);
       });
       var ss = new Array();
       this.request.get("/bookSort/getNum").then(res => {
         console.log(option.series)
         console.log(res)
         option.series = res
         console.log( option.series )
         option.series.forEach(ele => {
           ele.type = 'line';
           ele.stack = 'Total';
         })
         option && myChart.setOption(option);
       })
/*
       option.series.forEach((res,index) => {
         console.log(index)
         console.log(ss[index])
          res = ss[index]
       })*/

     }
    }
</script>

<style scoped>

</style>